/* 配套视频讲解地址:
*	https://www.bilibili.com/video/av75489979/ 
*/
* {
	margin: 0;
	padding: 0;
}
body {
	height: 100vh;
	background: linear-gradient(180deg,#e74c3c,#f1c40f);
}

h1 {
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%); 
	color: white;
}

ul li {
	width: 30px;
	height: 30px;
	border: 1px solid white;
	position: absolute;
	list-style: none;
}
.square li { 
	animation: square 10s linear infinite;
}

.square li:nth-child(1) {
	top: 50vh;
	left: 45vh;
	animation-delay: 2s; 
	background: white;
}
.square li:nth-child(2) {
	top: 80vh;
	left: 10vh;
	animation-delay: 4s;
}
.square li:nth-child(3) {
	top: 80vh;
	left: 85vh;
	animation-delay: 6s;
}
.square li:nth-child(4) {
	top: 10vh;
	left: 70vh;
	animation-delay: 8s; 
	background: white;
}
.square li:nth-child(5) {
	top: 10vh;
	left: 10vh; 
}

@keyframes square{
	from{
		opacity: 1;
		transform: scale(0) rotateY(0);
	}
	to{
		opacity: 0;
		transform: scale(5) rotateY(1000deg);
	}
}
.circle li {
	bottom: 0;
	left: 15vw;
	animation: circle 10s linear infinite;
}
.circle li:nth-child(2) { 
	left: 35vw;
	animation-delay: 2s; 
	background: white;
}
.circle li:nth-child(3) { 
	left: 55vw;
	animation-delay: 4s;
}
.circle li:nth-child(4) { 
	left: 75vw;
	animation-delay: 6s;
	background: white;
}
.circle li:nth-child(5) { 
	left: 90vw;
	animation-delay: 8s;
}

@keyframes circle{
	from{
		opacity: 1;
		transform:translateY(0) scale(0) rotate(0) ;
	}
	to{
		opacity: 0;
		transform:translateY(-95vh) scale(5) rotate(1000deg) ;
		border-radius: 50%;
	}
}